iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
自我挑戰組

草頭黃小姐的 30 天 JavaScript 自學小本本系列 第 16

Day 16 JavaScript 事件的基礎應用 (2)

  • 分享至 

  • xImage
  •  

以菜菜子的我來說,學習 JavaScript 只要每天懂一點點,好像沒那麼困難了,反而還意外的有趣!

還記得我們昨天做的 click 的例子嗎?
我們來用這個例子來寫出監聽的事件

var clicker =document.querySelector('#clicker');

  clicker.addEventListener("click",function(){
  console.log('我被按了');
});

這是原本的方式用 addEventListener 監聽,那另一個寫法可以這樣寫:

var clicker =document.querySelector('#clicker');

  clicker.onclick=function(){
     console.log('我被按了')
  }

如果我不想預設的事情發生

回到昨天的寫法,用 addEventListener 去帶出後面的 function 去做印出「我被按了」的事情。他也默默可以默默塞一個參數進來,我們先用 function 後的括號放入 evt。

var clicker =document.querySelector('#clicker');

  clicker.onclick=function(evt){
  
     console.log('我被按了')
  }

接著我們在之後的中括號寫:

var clicker =document.querySelector('#clicker');

  clicker.onclick=function(evt){
     evt.preventDefault()
     console.log('我被按了')
  }

code 裡面的第四行,evt.preventDefault,這個方法很好使用,假設你在做一個表單,你按下去的時候,你預設行為可能是送出表單,但是這個的意思就是預設的行為先別做,請你做我指定的事情。


上一篇
Day 15 JavaScript 事件的基礎應用 (1)
下一篇
Day 17 物件導向程式設計
系列文
草頭黃小姐的 30 天 JavaScript 自學小本本30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言